<template>
        <ElDialog
            v-model.sync="dialogVisible"
            :class="{ animated: true, fadeOutDown: !dialogVisible, fadeInDown: dialogVisible }"
            width="1200px"
            :title="title"
            :closeOnClickModal="false"
            :modalAppendToBody="false"
            @open="openInit"
            @close="close"
            draggable
        >
            <el-form
                ref="formRef"
                :model="form"
                v-loading="loading"
                labelWidth="120px"
                labelPosition="right"
                labelSuffix=":"
            >
                <el-row :gutter="20">
                    <el-col :span="8">
            <el-form-item
                label="软件名称"
                prop="name"
                :rules="[{ required: true, message: '请输入软件名称', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.name"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="软件编号"
                prop="code"
                :rules="[{ required: true, message: '请输入软件编号', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.code"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="软件分类"
                prop="softType"
                :rules="[{ required: true, message: '请选择软件分类', trigger: 'blur' }]"
            >
                <el-select v-model="form.softType" style="width: 100%" placeholder="请选择软件分类">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="管理人员"
                prop="managerId"
                :rules="[{ required: true, message: '请选择管理人员', trigger: 'blur' }]"
            >
                <el-select v-model="form.managerId" style="width: 100%" placeholder="请选择管理人员">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="用途"
                prop="useWay"
                :rules="[{ required: true, message: '请输入用途', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.useWay"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="所属公司"
                prop="ownCompany"
                :rules="[{ required: true, message: '请选择所属公司', trigger: 'blur' }]"
            >
                <el-select v-model="form.ownCompany" style="width: 100%" placeholder="请选择所属公司">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="使用员工"
                prop="useUserIds"
                :rules="[{ required: true, message: '请选择使用员工', trigger: 'blur' }]"
            >
                <el-select v-model="form.useUserIds" style="width: 100%" placeholder="请选择使用员工">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="使用部门"
                prop="useDeptIds"
                :rules="[{ required: true, message: '请选择使用部门', trigger: 'blur' }]"
            >
                <el-select v-model="form.useDeptIds" style="width: 100%" placeholder="请选择使用部门">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="来源"
                prop="comeWay"
                :rules="[{ required: true, message: '请选择来源', trigger: 'blur' }]"
            >
                <el-select v-model="form.comeWay" style="width: 100%" placeholder="请选择来源">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="供应商"
                prop="supply"
                :rules="[{ required: true, message: '请输入供应商', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.supply"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="购置日期"
                prop="buyDate"
                :rules="[{ required: true, message: '请选择购置日期', trigger: 'blur' }]"
            >
                <el-date-picker
                    v-model="form.buyDate"
                    type="date"
                    valueFormat="YYYY-MM-DD"
                    placeholder="购置日期"
                    style="width: 100%"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="购置价格(元)"
                prop="buyMoney"
                :rules="[{ required: true, message: '请输入购置价格(元)', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.buyMoney"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="许可模式"
                prop="licensingType"
                :rules="[{ required: true, message: '请选择许可模式', trigger: 'blur' }]"
            >
                <el-date-picker
                    v-model="form.licensingType"
                    type="date"
                    valueFormat="YYYY-MM-DD"
                    placeholder="许可模式"
                    style="width: 100%"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="许可数量"
                prop="licensingNum"
                :rules="[{ required: true, message: '请输入许可数量', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.licensingNum"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="版权类型"
                prop="copyrightType"
                :rules="[{ required: true, message: '请选择版权类型', trigger: 'blur' }]"
            >
                <el-select v-model="form.copyrightType" style="width: 100%" placeholder="请选择版权类型">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="授权开始日期"
                prop="useStartDate"
                :rules="[{ required: true, message: '请选择授权开始日期', trigger: 'blur' }]"
            >
                <el-date-picker
                    v-model="form.useStartDate"
                    type="date"
                    valueFormat="YYYY-MM-DD"
                    placeholder="授权开始日期"
                    style="width: 100%"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="授权结束日期"
                prop="useEndDate"
                :rules="[{ required: true, message: '请选择授权结束日期', trigger: 'blur' }]"
            >
                <el-date-picker
                    v-model="form.useEndDate"
                    type="date"
                    valueFormat="YYYY-MM-DD"
                    placeholder="授权结束日期"
                    style="width: 100%"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="软件版本"
                prop="softwareVersion"
                :rules="[{ required: true, message: '请输入软件版本', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.softwareVersion"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="24">
            <el-form-item
                label="授权码"
                prop="authorizationCode"
            >
                <el-input
                    v-model="form.authorizationCode"
                    maxlength="500"
                    type="textarea"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="24">
            <el-form-item
                label="授权信息"
                prop="authorizationInfo"
            >
                <el-input
                    v-model="form.authorizationInfo"
                    maxlength="500"
                    type="textarea"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="维保厂家"
                prop="repairFactory"
                :rules="[{ required: true, message: '请输入维保厂家', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.repairFactory"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="维保厂家编码"
                prop="repairFactoryCode"
                :rules="[{ required: true, message: '请输入维保厂家编码', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.repairFactoryCode"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="售后联系人"
                prop="repairUser"
                :rules="[{ required: true, message: '请输入售后联系人', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.repairUser"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="售后联系人电话"
                prop="repairUserPhone"
                :rules="[{ required: true, message: '请输入售后联系人电话', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.repairUserPhone"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="维保开始日期"
                prop="repairStartDate"
                :rules="[{ required: true, message: '请选择维保开始日期', trigger: 'blur' }]"
            >
                <el-date-picker
                    v-model="form.repairStartDate"
                    type="date"
                    valueFormat="YYYY-MM-DD"
                    placeholder="维保开始日期"
                    style="width: 100%"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="维保结束日期"
                prop="repairEndDate"
                :rules="[{ required: true, message: '请选择维保结束日期', trigger: 'blur' }]"
            >
                <el-date-picker
                    v-model="form.repairEndDate"
                    type="date"
                    valueFormat="YYYY-MM-DD"
                    placeholder="维保结束日期"
                    style="width: 100%"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="保修期(月)"
                prop="repairMonth"
                :rules="[{ required: true, message: '请输入保修期(月)', trigger: 'blur' }]"
            >
                <el-input
                    v-model="form.repairMonth"
                    style="width: 100%"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="8">
            <el-form-item
                label="维保状态"
                prop="repairStatus"
                :rules="[{ required: true, message: '请选择维保状态', trigger: 'blur' }]"
            >
                <el-select v-model="form.repairStatus" style="width: 100%" placeholder="请选择维保状态">
                    <el-option label="选项一" value="0"></el-option>
                    <el-option label="选项二" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        
          <el-col :span="24">
            <el-form-item
                label="备注"
                prop="remark"
            >
                <el-input
                    v-model="form.remark"
                    maxlength="500"
                    type="textarea"
                    placeholder="请输入"
                />
            </el-form-item>
        </el-col>
        
          <el-col :span="24">
            <el-form-item
                label="附件"
                prop="upFiles"
            >
                <OproUpload
                    v-model="form.upFiles"
                    listType="text"
                    @change="handleFileChange"
                ></OproUpload>
            </el-form-item>
        </el-col>
        
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <ElButton type="primary" :loading="submitLoading" @click="submitPartForm">确 定</ElButton>
                    <ElButton @click="handleCancel">取 消</ElButton>
                </div>
            </template>
        </ElDialog>
    </template>

    <script setup name="CopyAssetsAddEdit">
    import { addInstance, editInstance } from '../service';
    import OproUpload from '@/views/components/OproUpload';

    const { proxy } = getCurrentInstance();
    const emit = defineEmits(['refresh']);

    const formRef = ref(null);
    const form = reactive({
        id: null,
        name: null,  // 软件名称
          code: null,  // 软件编号
          softType: null,  // 软件分类
          managerId: null,  // 管理人员
          useWay: null,  // 用途
          ownCompany: null,  // 所属公司
          useUserIds: null,  // 使用员工
          useDeptIds: null,  // 使用部门
          comeWay: null,  // 来源
          supply: null,  // 供应商
          buyDate: null,  // 购置日期
          buyMoney: null,  // 购置价格(元)
          licensingType: null,  // 许可模式
          licensingNum: null,  // 许可数量
          copyrightType: null,  // 版权类型
          useStartDate: null,  // 授权开始日期
          useEndDate: null,  // 授权结束日期
          softwareVersion: null,  // 软件版本
          authorizationCode: null,  // 授权码
          authorizationInfo: null,  // 授权信息
          repairFactory: null,  // 维保厂家
          repairFactoryCode: null,  // 维保厂家编码
          repairUser: null,  // 售后联系人
          repairUserPhone: null,  // 售后联系人电话
          repairStartDate: null,  // 维保开始日期
          repairEndDate: null,  // 维保结束日期
          repairMonth: null,  // 保修期(月)
          repairStatus: null,  // 维保状态
          remark: null,  // 备注
          upFiles: null,  // 附件
    });

    const rowId = ref(null);
    const isAdd = ref(true);
    const isEdit = ref(false);
    const title = computed(() => (isAdd.value ? '新增版权资产' : '编辑版权资产'));
    const dialogVisible = ref(false);
    const loading = ref(false);
    const submitLoading = ref(false);

    function resetForm() {
        formRef.value?.resetFields();
    }

    function handleCancel() {
        dialogVisible.value = false;
        resetForm();
    }

    function close() {
        dialogVisible.value = false;
        resetForm();
    }

    function submitPartForm() {
        formRef.value?.validate(valid => {
            if (valid) {
                // 验证通过，提交表单
                if (isAdd.value) addSubmit();
                if (isEdit.value) editSubmit();
            } else {
                // 验证不通过，提示错误信息
                console.log('error submit!!');
                return false;
            }
        });
    }

    function handleFileChange(data) {
        const urlArr = data.map((item) => item.fileUrl);
        form.upFiles = JSON.stringify(urlArr);
        formRef.value.validateField('upFiles');
    }

    function addSubmit() {
        form.id = null;
        submitLoading.value = true;
        addInstance(form).then(res => {
            if (res.code === 200) {
                proxy.$modal.msgSuccess('操作成功');
                close();
                emit('refresh');
            }
        }).finally(() => {
            submitLoading.value = false;
        });
    }

    function editSubmit() {
        submitLoading.value = true;
        editInstance(form).then(res => {
            if (res.code === 200) {
                proxy.$modal.msgSuccess('操作成功');
                close();
                emit('refresh');
            }
        }).finally(() => {
            submitLoading.value = false;
        });
    }

    // 需要延迟获取一些信息时使用，如异步获取备选下拉选项
    function openInit(params) {
       // if (isEdit.value) {
          
       // } else {
          
       // }
    }

    const open = row => {
        isAdd.value = !row;
        isEdit.value = !!row;
        dialogVisible.value = true;
        if (isEdit.value) {
            rowId.value = row.id;
            form.id = row.id;
            form.name = row.name 
          form.code = row.code 
          form.softType = row.softType 
          form.managerId = row.managerId 
          form.useWay = row.useWay 
          form.ownCompany = row.ownCompany 
          form.useUserIds = row.useUserIds 
          form.useDeptIds = row.useDeptIds 
          form.comeWay = row.comeWay 
          form.supply = row.supply 
          form.buyDate = row.buyDate 
          form.buyMoney = row.buyMoney 
          form.licensingType = row.licensingType 
          form.licensingNum = row.licensingNum 
          form.copyrightType = row.copyrightType 
          form.useStartDate = row.useStartDate 
          form.useEndDate = row.useEndDate 
          form.softwareVersion = row.softwareVersion 
          form.authorizationCode = row.authorizationCode 
          form.authorizationInfo = row.authorizationInfo 
          form.repairFactory = row.repairFactory 
          form.repairFactoryCode = row.repairFactoryCode 
          form.repairUser = row.repairUser 
          form.repairUserPhone = row.repairUserPhone 
          form.repairStartDate = row.repairStartDate 
          form.repairEndDate = row.repairEndDate 
          form.repairMonth = row.repairMonth 
          form.repairStatus = row.repairStatus 
          form.remark = row.remark 
          form.upFiles = row.upFiles 
        }
    };

    defineExpose({
        open,
    });
    </script>

    <style lang="scss" scoped>
    .title {
        line-height: 24px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        padding-top: 10px;
        margin-bottom: 10px;
    }

    ::v-deep(.el-descriptions__label) {
        width: 110px;
    }

    ::v-deep(.detail-img #upload) {
        display: none;
    }

    .form-layout {
        margin-top: 20px;
    }

    .form-title {
        margin-left: 4px;
        font-size: 16px;
        padding-bottom: 14px;
    }
    .section-title {
        margin-left: 4px;
        font-size: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        padding-left: 4px;
        position: relative;
    }
    .section-title::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 20px;
        background-color: #409eff;
        left: -10px;
        top: 2px;
    }
    .add-btn {
        padding-bottom: 14px;
    }
    </style>